<template>
  <el-drawer :visible.sync="drawer" direction="rtl" :before-close="beforeClose" size="80%" :show-close="true">
    <div class="topVue">
      <div class="topLeft">
        <span style="color: #1a1a1a; font-weight: 600">盘点任务详情</span>
        <div
          class="state"
          :style="{
            background: ['#F3E8DC', '#E8F8F2', '#E7E7E7'][detail.status],
            color: ['#ED7B2F', '#52A870', '#391818'][detail.status],
          }"
        >
          {{ ['未完成', '已完成', '已作废'][detail.status] }}
        </div>
      </div>
      <div class="topRight">
        <!-- <div class="btn">作废</div> -->
        <!-- <div class="btn" @click="toDelete">删除</div> -->
      </div>
    </div>
    <div style="width: 100%; height: 10px; background-color: #f8f8f8"></div>
    <div class="infoVue">
      <div class="info">
        <div class="li">任务编号： {{ detail.stocktakingTaskNo }}</div>
        <div class="li">盘点门仓： {{ detail.storeName }}</div>
        <div class="li">商品分类： {{ detail.categoryStr }}</div>
      </div>
      <div style="width: 100%; height: 20px"></div>
      <div class="info">
        <div class="li">截止日期： {{ detail.deadline }}</div>
        <div class="li">盘点备注： {{ detail.reason }}</div>
        <div class="li">创建人： {{ detail.createName }}</div>
      </div>
      <div style="width: 100%; height: 20px"></div>
      <div class="info">
        <div class="li">创建时间： {{ detail.createTime }}</div>
      </div>
    </div>
    <div style="width: 100%; height: 10px; background-color: #f8f8f8"></div>

    <div class="tableVue">
      <div class="tableList">
        <div class="thVue">
          <div class="th">商品编号</div>
          <div class="th">商品名称</div>
          <div class="th">图片</div>
          <div class="th">商品规格</div>
          <div class="th">单位</div>
          <div class="th">应盘库存</div>
          <div class="th">实盘库存</div>
          <div class="th">盘盈盘亏</div>
        </div>
        <div class="tdVue">
          <div class="tdItem" v-for="(item, index) in detail.details" :key="index">
            <div class="td">{{ item.itemNumber }}</div>
            <div class="td">{{ item.productName }}</div>
            <div class="td">
              <img :src="item.image" style="width: 40px; height: 40px" />
            </div>
            <div class="td">{{ item.sku }}</div>
            <div class="td">{{ item.unitName }}</div>
            <div class="td">{{ item.expectStock }}</div>
            <div class="td">{{ item.actualStock || "--" }}</div>
            <div class="td" :style="{ color: item.differenceStock>0 ? '#72B597' : '#E79199'}" v-if="item.differenceStock!=0">{{ item.differenceStock>0 ? "盘盈" :"盘亏"}} {{ item.differenceStock }}</div>
            <div class="td" v-else>不盈不亏</div>
            
        </div>
        </div>
      </div>
    </div>

    <div style="width: 100%; height: 10px; background-color: #f8f8f8"></div>
  </el-drawer>
</template>

<script>
import { stocktakingDetail } from '@/api/msg';
export default {
  props: {
    drawer: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      detail: {},
    };
  },
  methods: {
    getDetail(id) {
      stocktakingDetail({ id }).then((res) => {
        console.log(res);
        this.detail = res;
      });
    },
    beforeClose() {
      this.$emit('beforeClose');
    },

    toDelete() {
      this.$emit('toDelete', this.detail.id);
    },
  },
};
</script>

<style lang="scss">
.el-main .el-drawer__body,
[role='dialog'] .el-drawer__body {
  padding: 0;
}
.topVue {
  width: 100%;
  height: 60px;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .topLeft {
    display: flex;
    align-items: center;
    .state {
      width: 80px;
      height: 32px;
      text-align: center;
      line-height: 32px;
      border-radius: 5px;
      margin-left: 10px;
    }
  }
  .topRight {
    display: flex;
    align-items: center;
    .btn {
      width: 70px;
      height: 32px;
      text-align: center;
      line-height: 32px;
      border-radius: 5px;
      margin-left: 15px;
      cursor: pointer;
    }
    .btn:nth-child(1) {
      background: #266fe8;
      border-radius: 6px;
      color: #fff;
    }
    .btn:nth-child(2) {
      border: 1px solid #e35b69;
      border-radius: 6px;
      color: #e35b69;
    }
  }
}

.infoVue {
  width: 100%;
  padding: 20px;
  .info {
    display: flex;
    .li {
      width: 33.33333%;
    }
  }
}
.tableVue {
  width: 100%;
  .thVue {
    width: 100%;
    display: flex;
    height: 70px;
    align-items: center;
    border-bottom: 1px solid #f5f5f5;
    .th {
      flex: 1;
      color: #333333;
      font-weight: 600;
      text-align: center;
    }
    .th:nth-last-child(1) {
      width: 250px;
    }
  }
  .tdVue {
    width: 100%;
    height: calc(100vh - 186px - 62px - 70px - 60px);
    overflow-y: scroll;
    .tdItem {
      width: 100%;
      height: 50px;
      display: flex;
      align-items: center;
      border-bottom: 1px solid #f5f5f5;
      .td {
        flex: 1;
        text-align: center;
      }
      .td:nth-last-child(1) {
        width: 250px;
      }
    }
  }
}
</style>
